<!-- 设备维修-故障登记 -->
<template>
  <basic-container>
    <avue-form
      :option="option"
      ref="form"
      v-model="form"
      @submit="handleSubmit"
      @reset-change="handleReset"
      :upload-delete="uploadDelete"
      :upload-before="uploadBefore"
      :upload-after="uploadAfter"
    ></avue-form>
    <global-modal-template :visibile.sync="visibile" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </global-modal-template>
  </basic-container>
</template>

<script>
import { mapGetters } from 'vuex';
import { add } from '@/api/equipment-manage/faultRegister';
import GlobalModalTemplate from '@/components/common-modal-template/global-modal-template.vue';
export default {
  components: {
    GlobalModalTemplate
  },
  data() {
    return {
      visibile: false,
      timer: new Date().getTime(), //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
      modalName: '', //打开公用模态框名称
      tableOption: {}, //公用模态框配置信息
      form: {
        imageList: [],
        equipmentId: ''
      },
      option: {
        group: [
          {
            label: '设备信息',
            prop: 'sbxx',
            column: [
              {
                label: '设备编码',
                prop: 'equipmentCode',
                disabled: true,
                type: 'search',
                rules: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
                appendClick: () => {
                  this.openUserCommonModal({
                    type: 'equipment'
                  });
                }
              },
              {
                label: '设备名称',
                prop: 'equipmentName',
                disabled: true
              },
              {
                label: '设备型号',
                prop: 'equipmentModel',
                disabled: true
              }
              // {
              //   label: '设备类型',
              //   prop: 'equipmentType',
              //   disabled: true
              // }
            ]
          },
          {
            label: '故障信息',
            prop: 'gzdjxx',
            column: [
              {
                label: '故障现象',
                prop: 'faultSymptomId',
                type: 'select',
                dicUrl: '/api/mes-product/mro/dict/list?dictType=EQUIPMENT&subType=FAULT',
                dicData: [],
                props: {
                  label: 'code',
                  value: 'id'
                },
                typeformat(item, label, value) {
                  return `${item['name']} (${item['code']})`;
                },
                rules: [{ required: true, message: '请输入故障现象', trigger: 'blur' }]
              },
              {
                label: '紧急程度',
                prop: 'urgency',
                type: 'select',
                value: 'GENERAL',
                dicData: [
                  { label: '一般', value: 'GENERAL' },
                  { label: '紧急', value: 'URGE' }
                ],
                rules: [{ required: true, message: '请输入紧急程度', trigger: 'blur' }]
              },
              {
                label: '故障描述',
                prop: 'remark',
                span: 24,
                type: 'textarea',
                minRows: 6,
                maxRows: 6,
                maxlength: 300,
                showWordLimit: true,
                rules: [{ required: true, message: '请输入故障描述', trigger: 'blur' }]
              },
              {
                label: '故障图片',
                prop: 'imageVOList',
                type: 'upload',
                listType: 'picture-card',
                loadText: '附件上传中，请稍等',
                span: 24,
                propsHttp: {
                  res: 'data',
                  url: 'link',
                  name: 'originalName'
                },
                tip: '只能上传png/jpeg/jpg文件且最多上传3张！',
                action: '/api/blade-resource/oss/endpoint/put-file-attach'
              }
            ]
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        // addBtn: this.vaildData(this.permission.productionline_add, false),
        // viewBtn: this.vaildData(this.permission.productionline_view, false),
        // delBtn: this.vaildData(this.permission.productionline_delete, false),
        // editBtn: this.vaildData(this.permission.productionline_edit, false)
      };
    }
  },
  mounted() {},
  methods: {
    handleSubmit(form, done) {
      form.imageVOList = form.imageList;
      form.faultSymptomCode = form.$faultSymptomId;
      delete form.imageList;
      add(form)
        .then((res) => {
          this.$message.success('提交成功，请到维修执行进行查看');
          this.$refs.form.resetForm();
          done();
        })
        .catch((err) => {
          done();
        });
    },
    handleReset() {},
    openUserCommonModal(params) {
      let { type } = params;
      switch (type) {
        // 产品
        case 'equipment':
          this.modalName = 'equipmentModal';
          this.visibile = true;
          this.tableOption = {
            modalTitle: '选择设备信息',
            url: '/api/mes-product/ems-equipment/page?type=PRINTER',
            isPage: true,
            rowSelectionType: 'single',
            menuWidth: 100,
            templateName: 'PARTMASTER',
            column: [
              {
                label: '编码',
                prop: 'code',
                search: true
              },
              {
                label: '名称',
                prop: 'name',
                search: true
              },
              {
                label: '型号',
                prop: 'model'
              }
            ]
          };
          break;
        default:
          break;
      }
    },
    // 获取选择的模态框行数据
    getSelectedRows(rowData) {
      switch (this.modalName) {
        case 'equipmentModal':
          this.form.equipmentCode = rowData.code;
          this.form.equipmentName = rowData.name;
          this.form.equipmentModel = rowData.model;
          // this.form.equipmentType = rowData.categoryName;
          this.form.equipmentId = rowData.id;
          this.visibile = false;
          break;
        default:
          break;
      }
    },
    // 上传前方法
    uploadBefore(file, done, loading, column) {
      if (file.name.split('.')[1] != 'png' && file.name.split('.')[1] != 'jpeg' && file.name.split('.')[1] != 'jpg') {
        this.$message({
          type: 'warning',
          message: '只能上传png/jpeg/jpg文件！'
        });
        loading();
        return;
      } else {
        console.log('this.form.imageList', this.form.imageList);
        if (this.form.imageList.length >= 3) {
          this.$message({
            type: 'warning',
            message: '最多支持上传3张！'
          });
          loading();
          return;
        } else {
          done();
        }
      }
    },
    // 上传后方法
    uploadAfter(res, done, loading, column) {
      this.form['imageList'].push({
        attachmentId: res.attachId,
        attachmentUrl: res.link,
        attachmentType: 'PICTURE'
      });
      done();
    },
    uploadDelete(file, column) {
      let fileIndex = Number(file.uid);
      return this.$confirm(`是否确定移除${file.name}？`)
        .then((res) => {
          this.form.imageList.splice(fileIndex, 1);
        })
        .catch(() => {});
    },
    // 重新加载公用表格弹窗组件
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style lang="scss" scope>
.el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
}
</style>
